<template>
	<div>
		<el-form v-if="list.length">
			<el-timeline>
				<el-timeline-item
					v-for="(item, index) in list"
					:key="index"
					:timestamp="item.time"
					placement="top"
				>
					<el-card shadow="never">
						<div slot="header" class="flex flex-justify-between">
							<cl-customer :name="item.user_name" />
							<div class="flex-column flex-justify-center">
								<div class="tag danger" v-if="item.type == 1">
									跟进
								</div>
								<div class="tag warning" v-if="item.type == 2">
									回访
								</div>
							</div>
						</div>
						<div v-if="item.type == 1">
							<el-form-item label="跟进方式：">
								{{ item.follow_type | filterType }}
							</el-form-item>
							<el-form-item label="跟进内容：">
								<div class="ellipsis3">
									{{ item.content }}
								</div>
							</el-form-item>
							<el-form-item label="跟进图片/视频：">
								<div v-if="getFileType(item.url) ==='image'">
									<el-image 
											:style="{width:'150px',height:'100px'}" 
											:src="item.url"
											fit="scale-down"
											:preview-src-list="[item.url]"
									>
									</el-image>
								</div>
								<div v-if="getFileType(item.url) ==='video'" 
												style="width: 100%;height: 100%;">
										<video  width="120px" height="100px"	:src="item.url" controls="controls" />
								</div>
							</el-form-item>
						</div>
						<div v-if="item.type == 2">
							<el-row :gutter="20">
								<el-col :md="8" :sm="12" :xs="24">
									<el-form-item label="服务评价：">
										<el-rate v-model="item.ser_level" disabled />
									</el-form-item>
								</el-col>
								<el-col :md="8" :sm="12" :xs="24">
									<el-form-item label="技师评价：">
										<el-rate v-model="item.tec_level" disabled />
									</el-form-item>
								</el-col>
								<el-col :md="8" :sm="12" :xs="24">
									<el-form-item label="门店评价：">
										<el-rate v-model="item.dept_level" disabled />
									</el-form-item>
								</el-col>
							</el-row>
							<el-form-item label="有无投诉：">
								{{ item.complaint == 1 ? "无" : "有" }}
							</el-form-item>
							<el-form-item label="回访内容：">
								<div class="ellipsis3">
									{{ item.content }}
								</div>
							</el-form-item>
						</div>
					</el-card>
				</el-timeline-item>
			</el-timeline>
		</el-form>
		<cl-empty v-else tips="暂无互动详情" />
	</div>
</template>
<script>
import {getFileType} from "@/utils/common"
export default {
	props: {
		detail: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {
			list: []
		};
	},
	filters: {
		filterType(val) {
			switch (val) {
				case 1:
					val = "电话";
					break;
				case 2:
					val = "QQ";
					break;
				case 3:
					val = "微信";
					break;
				case 4:
					val = "面聊";
					break;
			}
			return val;
		}
	},
	methods: {
		async init() {
			const { cus_id, biz_id } = this.detail;
			const data = await this.$service.customer.interaction({ page: 1, page_size: 1000, cus_id, biz_id });
			this.list = data.map(v => ({ ...v, type: v.follow_type ? 1 : 2 }));
			console.log(this.list,'33333333333333333333')
		}
	}
};
</script>
<style lang="scss" scoped>
::v-deep {
	.el-card__header {
		padding: 10px 20px;
	}
	.el-form-item {
		margin-bottom: 0;
	}
	.el-rate {
		position: relative;
		top: 5px;
	}
}
.empty {
	text-align: center;
	color: #7f7f7f;
}
</style>
